import BpmnModeler from "@/module/main/other/BpmnTestView/BpmnModeler";
import {Component, ComponentProps, Computed, Hook, Mut, VueComponent} from "vue3-oop";
import {NForm, NGrid, NGi, NFormItemGi, NInput, NSpace, NCheckbox} from "naive-ui";
import UserTask from './tasks/UserTask'
import ScriptTask from './tasks/ScriptTask'
import ReceiveTask from './tasks/ReceiveTask'

interface IProps {
  bpmnModeler: BpmnModeler,
  elementId: string,
  elementName: string,
  elementType: string
}
@Component()
export default class Index extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {default: {} as any},
    elementId: {default: ''},
    elementName: {default: ''},
    elementType: {default: ''}
  }

  public static tabKey = "TASK"
  public static tabName = "任务"

  @Mut() state = {
    asyncBefore: false,
    asyncAfter: false,
    exclusive: false,
  }

  @Computed() get isAsync(){return (this.state.asyncBefore||this.state.asyncAfter)}

  private loadPropsFromElement=()=>{
    const element = this.props.bpmnModeler.getSelectedElement();
    this.state.asyncBefore = element.businessObject.asyncBefore;
    this.state.asyncAfter = element.businessObject.asyncAfter;
    this.state.exclusive = element.businessObject.exclusive;
  }

  private updatePropsToElement=()=>{
    const {bpmnModeler} = this.props;
    const element = bpmnModeler.getSelectedElement();
    let propsObj = {
      asyncBefore: this.state.asyncBefore,
      asyncAfter: this.state.asyncAfter,
      exclusive: this.state.exclusive,
    } as any;
    bpmnModeler.getModeling().updateProperties(element,propsObj);
  }

  private updateAsyncBefore=(value:boolean)=>{
    this.state.asyncBefore=value;
    this.updateExclusive(this.state.exclusive);
  }

  private updateAsyncAfter=(value:boolean)=>{
    this.state.asyncAfter=value;
    this.updateExclusive(this.state.exclusive);
  }

  private updateExclusive = (value:boolean)=>{
    this.state.exclusive = this.isAsync && value;
    this.updatePropsToElement();
  }

  render(){
    // console.log(this.props.elementType)
    this.loadPropsFromElement();
    const CmpProps = {bpmnModeler:this.props.bpmnModeler,elementId:this.props.elementId,elementName:this.props.elementName,elementType:this.props.elementType};
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={1} xGap={20}>
          <NFormItemGi label="异步延续">
            <NSpace>
              <NCheckbox checked={this.state.asyncBefore} onUpdateChecked={this.updateAsyncBefore}>异步前</NCheckbox>
              <NCheckbox checked={this.state.asyncAfter} onUpdateChecked={this.updateAsyncAfter}>异步后</NCheckbox>
              { this.isAsync && <NCheckbox checked={this.state.exclusive} onUpdateChecked={this.updateExclusive}>排除</NCheckbox>}
            </NSpace>
          </NFormItemGi>
          <NGi>
            { this.props.elementType==='UserTask' && <UserTask {...CmpProps} /> }
            { this.props.elementType==='ScriptTask' && <ScriptTask {...CmpProps} /> }
            { this.props.elementType==='ReceiveTask' && <ReceiveTask {...CmpProps} /> }
          </NGi>
        </NGrid>
      </NForm>

    )
  }
}